<template>
  <van-form>
    <van-field
      v-model="metric"
      type="number"
      :label="metricLabel"
      right-icon="more-o"
      @click-right-icon="togglePicker('metric')"
      @blur="metricToImperial"
    />
    <van-field
      v-model="imperial"
      type="number"
      :label="imperialLabel"
      right-icon="more-o"
      @click-right-icon="togglePicker('imperial')"
      @blur="imperialToMetric"
    />
    <div style="margin: 16px">
      <van-button round block type="primary"> 转换 </van-button>
    </div>
  </van-form>

  <!-- 选择器 -->
  <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
    <van-picker
      :columns="columns"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
</template>

<script setup>
import { useTogglePicker } from "@/features/Length/useTogglePicker";
import { useLength } from "@/features/Length/useLength";

const { showPicker, columns, togglePicker } = useTogglePicker();
const {
  metricLabel,
  metric,
  metricUnit,
  imperialLabel,
  imperial,
  imperialUnit,
  onConfirm,
  metricToImperial,
  imperialToMetric,
} = useLength(showPicker, columns);
</script>
